<template>
  <GenericTableManager
    title="部门管理"
    :show-search="false"
    :show-pagination="false"
    @add="handleAdd"
    @edit="handleEdit"
    @delete="handleDelete"
    @refresh="handleRefresh"
    @submit="handleSubmit"
    ref="tableManagerRef"
  >
    <!-- 操作按钮插槽 -->
    <template #actions="{ handleAdd, handleRefresh, loading }">
      <el-button type="primary" :icon="Plus" @click="handleAdd">新增部门</el-button>
      <el-button type="success" :icon="Refresh" @click="handleRefresh" :loading="loading">刷新</el-button>
    </template>

    <!-- 表格列插槽 -->
    <template #columns="{ tableData, handleEdit, handleDelete }">
      <el-table-column prop="deptName" label="部门名称" width="200" />
      <el-table-column prop="deptCode" label="部门编码" width="120" />
      <el-table-column prop="leader" label="负责人" width="100" />
      <el-table-column prop="phone" label="联系电话" width="120" />
      <el-table-column prop="email" label="邮箱" width="180" />
      <el-table-column prop="sort" label="排序" width="80" align="center" />
      <el-table-column prop="status" label="状态" width="80" align="center">
        <template #default="{ row }">
          <el-tag :type="row.status === '0' ? 'success' : 'danger'">
            {{ row.status === '0' ? '正常' : '停用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="160" />
      <el-table-column label="操作" width="200" fixed="right">
        <template #default="{ row }">
          <el-button type="primary" size="small" :icon="Edit" @click="handleEdit(row)">编辑</el-button>
          <el-button type="success" size="small" :icon="Plus" @click="handleAddChild(row)">新增子部门</el-button>
          <el-button type="danger" size="small" :icon="Delete" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </template>

    <!-- 表单插槽 -->
    <template #form="{ formData, formRules, formRef, isEdit, loading }">
      <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="100px"
      >
        <el-form-item label="上级部门" prop="parentId">
          <el-tree-select
            v-model="formData.parentId"
            :data="deptOptions"
            :props="{ value: 'id', label: 'deptName', children: 'children' }"
            placeholder="请选择上级部门"
            style="width: 100%"
            check-strictly
          />
        </el-form-item>
        <el-form-item label="部门名称" prop="deptName">
          <el-input v-model="formData.deptName" placeholder="请输入部门名称" />
        </el-form-item>
        <el-form-item label="部门编码" prop="deptCode">
          <el-input v-model="formData.deptCode" placeholder="请输入部门编码" />
        </el-form-item>
        <el-form-item label="负责人" prop="leader">
          <el-input v-model="formData.leader" placeholder="请输入负责人" />
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="formData.phone" placeholder="请输入联系电话" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="formData.email" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item label="显示排序" prop="sort">
          <el-input-number v-model="formData.sort" :min="0" style="width: 100%" />
        </el-form-item>
        <el-form-item label="部门状态" prop="status">
          <el-radio-group v-model="formData.status">
            <el-radio label="0">正常</el-radio>
            <el-radio label="1">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="formData.remark"
            type="textarea"
            :rows="3"
            placeholder="请输入备注"
          />
        </el-form-item>
      </el-form>
    </template>
  </GenericTableManager>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus, Edit, Delete, Refresh } from '@element-plus/icons-vue'
import GenericTableManager from '@/components/GenericTableManager.vue'
import { useDeptTableManager } from '@/composables/useTableManager'
import { businessValidationRules } from '@/utils/commonValidation'
import { deptApiManager } from '@/api/common'
import type { Dept, DeptTreeNode } from '@/types/system'

// 使用通用表格管理
const {
  tableData,
  loading,
  handleAdd,
  handleEdit,
  handleDelete,
  handleSubmit,
  handleRefresh,
  setFormRules,
  setTableData
} = useDeptTableManager()

// 表格管理器引用
const tableManagerRef = ref()

// 部门选项
const deptOptions = ref<DeptTreeNode[]>([])

// 设置表单验证规则
const formRules = businessValidationRules.dept.form()

// 初始化
onMounted(async () => {
  setFormRules(formRules)
  await loadDeptData()
  await loadDeptOptions()
})

// 加载部门数据
const loadDeptData = async () => {
  try {
    // 模拟数据
    const mockData = [
      {
        id: 1,
        deptName: '总公司',
        deptCode: 'COMPANY',
        leader: '张三',
        phone: '13800138000',
        email: 'zhangsan@convallaria.com',
        sort: 1,
        status: '0',
        createTime: '2024-01-01 00:00:00',
        children: [
          {
            id: 11,
            deptName: '技术部',
            deptCode: 'TECH',
            leader: '李四',
            phone: '13800138001',
            email: 'lisi@convallaria.com',
            sort: 1,
            status: '0',
            createTime: '2024-01-01 00:00:00',
            children: [
              {
                id: 111,
                deptName: '前端组',
                deptCode: 'FRONTEND',
                leader: '王五',
                phone: '13800138002',
                email: 'wangwu@convallaria.com',
                sort: 1,
                status: '0',
                createTime: '2024-01-01 00:00:00'
              },
              {
                id: 112,
                deptName: '后端组',
                deptCode: 'BACKEND',
                leader: '赵六',
                phone: '13800138003',
                email: 'zhaoliu@convallaria.com',
                sort: 2,
                status: '0',
                createTime: '2024-01-01 00:00:00'
              }
            ]
          },
          {
            id: 12,
            deptName: '运营部',
            deptCode: 'OPERATION',
            leader: '孙七',
            phone: '13800138004',
            email: 'sunqi@convallaria.com',
            sort: 2,
            status: '0',
            createTime: '2024-01-01 00:00:00'
          },
          {
            id: 13,
            deptName: '市场部',
            deptCode: 'MARKETING',
            leader: '周八',
            phone: '13800138005',
            email: 'zhouba@convallaria.com',
            sort: 3,
            status: '0',
            createTime: '2024-01-01 00:00:00'
          }
        ]
      }
    ]
    
    setTableData(mockData)
  } catch (error) {
    ElMessage.error('获取部门列表失败')
  }
}

// 加载部门选项
const loadDeptOptions = async () => {
  try {
    // 模拟获取部门选项
    deptOptions.value = [
      { id: 0, deptName: '顶级部门', children: [] }
    ]
  } catch (error) {
    ElMessage.error('获取部门选项失败')
  }
}

// 新增子部门
const handleAddChild = (row: Dept) => {
  // 设置父级部门ID
  const formData = { parentId: row.id }
  handleAdd()
  // 这里需要设置表单数据，可以通过表格管理器的引用来实现
}
</script>

<style lang="scss" scoped>
.dept-management {
  .table-container {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
  }

  .table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #ebeef5;
  }

  .table-title {
    font-size: 16px;
    font-weight: 500;
    color: #303133;
  }

  .table-actions {
    display: flex;
    gap: 8px;
  }
}
</style>
